iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
自我挑戰組

從新手開始TypeScript系列 第 15

Day15-TypeScript(TS)的存取子(Accessors)

  • 分享至 

  • xImage
  •  

今天要來介紹TypeScript(TS)的存取子(Accessors)。

在類別(Class)之中可以宣告gettersetter存取子,
來存取物件成員。

若要定義getter存取子讀取屬性值,只要使用get關鍵字,
後面接屬性名稱與小括號。

若要定義setter存取子修改屬性值,只要使用get關鍵字,
後面接屬性名稱與小括號,小括號之中傳入值。

宣告存取子(Accessors)

那麼我們來看看範例吧 :

class Employee {

   constructor(private empId : number,private empName: string) {}

   showInfo() {
        return this.empId + "-" + this.mpName ;
    };

    //定義getter存取子 讀取 屬性值
    get name(){
        return this.empName ;
    }

    //定義setter存取子 修改 屬性值
    set name(name:string ){
        this.empName = name ;
    }

}

我來講解一下範例的程式碼吧,
首先先宣告一個Employee類別
接著在此類別內加入constructor建構函式並且設定存取成員,
而這裡的成員前方皆有加上private成員存取修飾詞
意味著這些成員只有在這類別中可以使用,
再來在這類別中加入一個函式,
之後可以呼叫使用,
最後定義
一個名為namegetter存取子,來讀取empName
一個名為namegetter存取子,來修改empName

使用存取子(Accessors)

那麼都宣告好了之後,
使用方式如下:


//一般類別使用方式
let emp1 = new Employee(1, "Mary");

console.log(emp1.empId) ; //1
console.log(emp1.empName) ; //Mary
console.log(emp1.showInfo()) ; //1-Mary


//用存取子修改empName
emp1.empName = "John";

console.log(emp1.empId) ; //1
console.log(emp1.empName) ; //John
console.log(emp1.showInfo()) ; //1-John

因為事先有建立存取子,
所以可以直接將empName改名,
另外要特別注意的是,
不是所有的JS都有支援getter與setter存取子
若是遇到不支援的問題,
建議可以在tsconfig.json檔案組態設定,
編譯選項target設定在**es5以上(含)**的版本,
即可解決。

今日結語

今天介紹了利用存取子來讀取與修改成員值,
這種取代方式要小心別讓後面的程式碼蓋掉原來需要的值喔,
Day15 done~一半啦,
加油加油!


上一篇
Day14-TypeScript(TS)使用成員存取修飾詞(Access Modifier)
下一篇
Day16-TypeScript(TS)在類別(Class)實作介面(Interface)
系列文
從新手開始TypeScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言